import { Pie } from '@ant-design/charts';

interface LearnRecord {
    id: number;
    progress: number;
    score: number | null;
    completionTime: string | null;
    easyType: number | null;
    remark: string | null;
    workId: number;
}

interface Props {
    learnRecords: LearnRecord[];
}

const EasyTypeAnalysis: React.FC<Props> = ({ learnRecords }) => {
    const easyTypes = [
        {id: 1, color: "#55acee", text: "很容易"},
        {id: 2, color: "#2db7f5", text: "容易"},
        {id: 3, color: "#87d068", text: "中等"},
        {id: 4, color: "#ff9999", text: "难"},
        {id: 5, color: "#f50", text: "很难"},
    ];

    const easyTypeMap = easyTypes.reduce((prev, curr) => {
        prev[curr.id] = curr.text;
        return prev;
    }, {} as Record<number, string>);

    const data = learnRecords.reduce((prev, curr) => {
        const easyType = curr.easyType;
        if (easyType !== null) {
            const text = easyTypeMap[easyType];
            prev[text] = (prev[text] || 0) + 1;
        }
        return prev;
    }, {} as Record<string, number>);

    const total = Object.values(data).reduce((prev, curr) => prev + curr, 0);
    const chartData = Object.entries(data).map(([text, count]) => ({
        type: text,
        count,
        percent: count / total,
    }));

    return (
        <Pie
            data={chartData}
            angleField="percent"
            colorField="type"
            radius={0.8}
            label={{
                type: 'spider',
                content: '{name}\n{percentage}',
            }}
            legend={{ position: 'bottom' }}
        />
    );
};

export default EasyTypeAnalysis;